<template>
	<view class="homePage fboxCol" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="本无签" :isAppBtn="!isApp" :isHome="!isApp"></HeadCustom>
		<u-tabs
			:lineColor="activeColor"
			itemStyle="height:88rpx"
			:activeStyle="{
				color: activeColor,
				'font-weight': 700,
				'font-size': tabsSize
			}"
			:current="auditStatus"
			:inactiveStyle="{
				color: inactiveColor,
				'font-size': tabsSize
			}"
			:list="bwqType"
			@click="changeItem"
		></u-tabs>
		<view class="fboxCol Ycenter Xcenter zwsj" v-if="isNohy">
			<Notempty text="暂无数据"></Notempty>
		</view>

		<view class="bwq_box" v-else>
			<scroll-view
				refresher-background="#fff"
				@scrolltolower="scrolltolowerView"
				scroll-y="true"
				@refresherrefresh="refresherrefreshView"
				style="height: 100%"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
			>
				<view class="bwqMsg" v-for="(item, index) in bwqList" :key="index">
					<view class="img_box" @tap="viewQdDetal(item)">
						<image class="banner_img" :src="item.themeBanner" mode="aspectFill"></image>
					</view>
					<view class="basicsMsg fboxCol" @tap="viewQdDetal(item)">
						<view class="fboxRow Xbetween">
							<text class="schoolName font32 font-ell1">{{ item.themeName }}</text>
							<text
								class="color_shz font20"
								:style="{
									color:
										item.auditStatus != 1
											? colorObj1[item.auditStatus]
											: colorObj[item.conferenceShowStatus],
									background:
										item.auditStatus != 1
											? ''
											: backColor[item.conferenceShowStatus]
								}"
							>
								{{
									item.auditStatus != 1
										? auditStatusObj[item.auditStatus]
										: shztObj[item.conferenceShowStatus]
								}}
							</text>
						</view>
						<text class="qdaddress font28 mt20">
							{{ formatDate(item.gmtStart) }} - {{ formatDate(item.gmtEnd) }}
						</text>
						<text class="qdaddress font28 mt20">{{ item.address }}</text>
					</view>
					<view class="btn_box" v-if="item.auditStatus != 0">
						<view
							class="fboxRow btn"
							style="margin-bottom: 26rpx"
							v-if="item.auditStatus == 1"
						>
							<view
								class="font28 btn-out-line"
								style="margin-right: 26rpx"
								@tap="viewBdSum(item)"
							>
								导出报名签到表
							</view>
							<view class="font28" @tap="openQrcode(item)">生成签到二维码</view>
						</view>
						<view class="fboxRow btn" style="margin-bottom: 26rpx">
							<view
								class="font28"
								style="margin-right: 26rpx"
								v-if="item.auditStatus == 1 && (item.isCreateGroup || groupId)"
								@tap="goCircle(item)"
							>
								查看圈子
							</view>
							<view
								class="font28"
								style="margin-right: 26rpx"
								v-else
								@tap="CreateCircle(item)"
							>
								一键建圈
							</view>
							<view class="font28" @tap="delContent(item, index)">删除本活动</view>
							<view
								class="font28"
								style="margin-left: 26rpx"
								v-if="item.auditStatus == 2"
								@tap="editContent(item)"
							>
								编辑
							</view>
						</view>
						<view class="fboxRow btn font28">
							<view
								class="conferenceBtn"
								v-if="item.conferenceShowStatus != 2"
								@click="conferenceContent(item)"
							>
								分享邀请函
							</view>
						</view>
					</view>
				</view>

				<u-loadmore fontSize="24rpx" :status="listConfig.loading" />
			</scroll-view>
		</view>
		<BottomBtn title="创建" @btnClick="clickBtn"></BottomBtn>

		<!-- 一键生成圈子 -->
		<viewCicle
			ref="createCicleRef"
			title="生成圈子"
			:isShowClose="true"
			:isShowConfirmText="true"
			@confirm="confirmCreateCircle"
			confirmText="一键建立"
		>
			<template #msg>
				<view class="slot-content circle_box">
					<image
						style="width: 100%; height: 300rpx"
						:src="createCircleDetail.icon"
						mode="aspectFill"
					></image>
					<view
						class="groupName_box"
						v-for="(item, index) in createCircleDetail.groupNames"
						:key="index"
					>
						<u--textarea
							border="none"
							style="width: 100%"
							v-model="createCircleDetail.groupNames[index]"
							placeholder="请输入圈子名称"
							autoHeight
							maxlength="20"
						></u--textarea>
					</view>
				</view>
			</template>
		</viewCicle>

		<!-- 查看圈子 -->
		<viewCicle
			ref="viewCicleRef"
			title="选择进入的圈子"
			:isShowClose="true"
			:isShowConfirmText="false"
		>
			<template #msg>
				<view
					class="group_box"
					v-for="(item, index) in groups"
					:key="index"
					@tap="viewGoGroup(item)"
				>
					{{ item.groupName }}
				</view>
			</template>
		</viewCicle>
		<!-- 删除会议 -->
		<viewCicle
			ref="delHyRef"
			title="提示"
			:isShowClose="true"
			:isShowConfirmText="true"
			@confirm="delConfenerce"
		>
			<template #msg>
				<view class="model-msg">确认删除该条会议吗？</view>
			</template>
		</viewCicle>
		<!-- 签到二维码 -->
		<viewCicle
			ref="codeHyRef"
			title="签到二维码"
			contentPosition="center"
			:isShowClose="true"
			:isShowConfirmText="true"
			@confirm="confirmQrcode"
			confirmText="下载"
		>
			<template #msg>
				<view class=""><image class="imgCodeBox" :src="imgCode" mode=""></image></view>
			</template>
		</viewCicle>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest, throttle, debounce } from '@/static/js/common.js';
import Notempty from '@/components/not-index/not-empty.vue';
import viewCicle from '@/components/model-public/index.vue';
import {
	conferenceCircleName,
	conferenceCircles,
	conferencePage,
	conferenceDelete,
	conferenceGenQrCode,
	conferencePageForOrg,
	conferenceCreateCircle,
	conferenceApplyExport,
	createInvitation
} from '@/api/h5.js';
export default {
	components: { BottomBtn, viewCicle, Notempty },
	data() {
		return {
			triggered: false,
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			auditStatus: 1, // 会议审核状态
			isNohy: false, // 是否有会议活动
			listConfig: {
				loading: ''
			},
			groupId: '',
			selectDelData: {},
			groups: [],
			imgCode: '',
			createCircleDetail: {},
			createCircleShow: false,
			qrcodeShow: false,
			bwqType: [
				{
					name: '已提交',
					id: 0,
					bracket: {
						value: 0
					}
				},
				{
					name: '已通过',
					id: 1,
					bracket: {
						value: 0
					}
				},
				{
					name: '未通过',
					id: 2,
					bracket: {
						value: 0
					}
				}
			],
			tabsSize: '30rpx',
			isApp: false,
			platId: '',
			page: {
				current: 1,
				size: 20,
				total: 0
			},
			bwqList: [],
			shztObj: {
				0: '未开始',
				1: '进行中',
				2: '已结束'
			},
			activeColor: '',
			inactiveColor: '',
			auditStatusObj: {
				0: '审核中',
				1: '',
				2: '未通过'
			},
			colorObj: {
				0: '#4179C5', // 未开始
				1: '#39A168', // 进行中
				2: '#6D6D76' // 已结束
			},
			// colorObj: {
			// 	0: '#747986', // 未开始
			// 	1: '#FFD9B5', // 进行中
			// 	2: '#FE6850' // 已结束
			// },
			backColor: {
				0: 'rgba(65,121,197,0.15)', // 未开始
				1: 'rgba(57,161,104,0.15)', // 进行中
				2: '#E8EDF1' // 已结束
			},
			// backColor: {
			// 	0: '#1E222F', // 未开始
			// 	1: 'rgba(255,217,181,0.1)', // 进行中
			// 	2: 'rgba(254,104,80,0.1)' // 已结束
			// },
			colorObj1: {
				0: '#4DC17D', // 待审核
				2: '#d25941' // 未通过
			}
		};
	},
	onLoad(option) {
		if (option && option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				access_token: getRequest(benwu, 'token'),
				companyId: getRequest(benwu, 'companyId'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight'),
				authStatus: getRequest(benwu, 'authStatus')
			};
			if (getRequest(benwu, 'groupId')) {
				this.groupId = getRequest(benwu, 'groupId');
			}
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			getApp().globalData.companyId = token.companyId;
			this.platId = token.companyId;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		if (option && option.isApp) {
			getApp().globalData.isApp = option.isApp;
			this.isApp = option.isApp;
			const { bw_link } = getApp().getBWData(['bw_link']);
			bw_link.isApp = option.isApp;
			uni.setStorageSync('bw_link', JSON.stringify(bw_link));
		}
		this.platId = getApp().globalData.companyId;
	},
	onShow() {
		this.changeItem({ id: getApp().globalData.auditStatus || 1 });
		const w = uni.getSystemInfoSync().screenWidth

		if (w > 780) {
			this.tabsSize = '30px';
		} else {
			this.tabsSize = '30rpx'

		}
	},
	watch: {
		globalColor: {
			handler(newVal) {
				if (newVal) {
					this.activeColor = newVal['selectedFontColor'];
					this.inactiveColor = newVal['contentFontLightColor'];
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		// 自定义下拉刷新
		refresherrefreshView() {
			this.page.size = 20;
			this.getInit();
			this.triggered = true;
			setTimeout(() => {
				this.triggered = false;
			}, 1000);
		},
		// 滑动到底部加载数据
		scrolltolowerView() {
			if (this.page.size * this.page.current < this.page.total) {
				this.listConfig.loading = 'loading';
				this.page.size += 10;
				this.getInit();
			} else {
				this.listConfig.loading = 'nomore';
			}
		},
		formatDate(time) {
			let date = time.split(' ')[0];
			return date.replaceAll('-', '.');
		},
		// 生成邀请函
		conferenceContent(data) {
			if (data.existInvitation) {
				this.$pageTo('/bwSign/invitationLetter?conferenceId=' + data.conferenceId);
			} else {
				this.$pageTo('/bwSign/generateInvitation?conferenceId=' + data.conferenceId);
			}
		},
		// 获取数据
		getInit() {
			this.isNohy = false;
			const obj = {
				...this.page,
				platId: this.groupId || this.platId,
				auditStatus: this.auditStatus
			};
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			conferencePageForOrg({ ...obj })
				.then((res) => {
					this.bwqType.forEach((item) => {
						if (item.id == 0) {
							item.bracket.value = res.data.pendingTotal;
						} else if (item.id == 1) {
							item.bracket.value = res.data.approvedTotal;
						} else {
							item.bracket.value = res.data.rejectedTotal;
						}
					});
					this.bwqList = res.data.list;
					this.page.total = res.data.total;
					if (this.page.total == 0) {
						this.isNohy = true;
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 查看详情
		viewQdDetal(data) {
			getApp().globalData.createBwqDetail = {};
			this.$pageTo(
				'/bwSign/qdDetail?conferenceId=' +
					data.conferenceId +
					'&isApp=' +
					getApp().globalData.isApp +
					'&type=' +
					'company'
			);
		},
		// 下载二维码
		confirmQrcode() {
			const url = this.imgCode;
			const data = { type: 'downLoad', pageType: 'bwSignCode', imgUrl: url };
			this.$bridge.callHandler('appHandler', data, () => {
				console.log('appHandler', '返回');
			});
			this.$refs.codeHyRef.show = false;
		},
		// 打开二维码弹框
		async openQrcode(item) {
			uni.showLoading({
				title: '加载中',
				icon: 'loading'
			});
			await conferenceGenQrCode({ conferenceId: item.conferenceId })
				.then((res) => {
					this.imgCode = res.data;
					// this.qrcodeShow = true;
				})
				.finally(() => {
					uni.hideLoading();
					this.$refs.codeHyRef.show = true;
				});
		},
		// 查看报道人数
		viewBdSum(item) {
			const obj = {
				conferenceId: item.conferenceId,
				conferenceType: '',
				isStay: '',
				mobile: '',
				realName: '',
				...this.page,
				workplace: ''
			};
			uni.showLoading({
				title: '下载中...',
				mask: true
			});
			conferenceApplyExport({ ...obj })
				.then((res) => {
					if (res.data) {
						const data = {
							type: 'downLoad',
							pageType: 'bwSignBdSum',
							downLoadUrl: res.data,
							downName: `${item.themeName}报名签到.xls`
						};
						this.$bridge.callHandler('appHandler', data, () => {
							console.log('appHandler', '返回');
						});
					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					}
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		keyWordChange: throttle(function () {
			this.getConferenceData();
		}, 1000),
		// 确定生成圈子
		confirmCreateCircle: debounce(function () {
			console.log('建立');
			if (this.createCircleDetail.groupNames.length == 0) {
				uni.showToast({
					title: '圈子名称不能为空',
					icon: 'none'
				});
				return;
			}
			let flag = false;
			this.createCircleDetail.groupNames.find((item, index) => {
				if (!item) {
					uni.showToast({
						title: `圈子${index + 1}名称不能为空`,
						icon: 'none'
					});
					flag = true;
				}
			});
			if (flag) {
				return;
			}
			conferenceCreateCircle({ ...this.createCircleDetail }).then((res) => {
				if (res.data) {
					this.getInit();
					this.$refs.createCicleRef.show = false;
					uni.showToast({
						title: '生成成功',
						icon: 'none'
					});
				}
			});
			this.createCircleShow = false;
		}, 1000),

		viewGoGroup(item) {
			if (getApp().globalData.isApp) {
				const data = { type: 'MyCircle', groupId: this.groupId || item.groupId };
				this.$bridge.callHandler('recruitHandler', data, () => {
					console.log('recruitHandler', '返回');
				});
			} else {
				this.$pageTo('/circle?id=' + item.groupId);
			}
		},
		// 查看圈子
		goCircle(item) {
			if (this.groupId) {
				this.viewGoGroup();
				return;
			}
			conferenceCircles({ conferenceId: item.conferenceId }).then((res) => {
				if (res.data) {
					this.groups = res.data.groups;
					if (this.groups.length && this.groups.length == 1) {
						this.viewGoGroup(this.groups[0]);
					} else {
						this.$refs.viewCicleRef.show = true;
					}
				}
			});
		},
		// 一键生成圈子
		CreateCircle(data) {
			this.createCircleDetail.conferenceId = data.conferenceId;
			conferenceCircleName({ conferenceId: data.conferenceId }).then((res) => {
				if (res.data) {
					this.createCircleDetail.groupNames = res.data.groupNames;
					this.createCircleDetail.icon = res.data.icon;
					// this.createCircleShow = true;
					this.$refs.createCicleRef.show = true;
				}
			});
		},
		// 创建
		clickBtn() {
			if (this.groupId && this.bwqList.length == 1) {
				uni.showToast({
					icon: 'none',
					title: '本无圈暂只支持创建一个活动'
				});
				return;
			}
			getApp().globalData.createBwqDetail = {};
			getApp().globalData.recruitmentTemp = {};
			this.$pageTo('/bwSign/createQd?groupId=' + this.groupId);
		},
		// 编辑会议
		editContent(item) {
			getApp().globalData.createBwqDetail = {};
			this.$pageTo('/bwSign/createQd?conferenceId=' + item.conferenceId);
		},
		// 删除会议
		delContent(item) {
			this.$refs.delHyRef.show = true;
			this.selectDelData = item;
		},
		delConfenerce() {
			conferenceDelete({ conferenceId: this.selectDelData.conferenceId }).then((res) => {
				if (res.data) {
					this.getInit();
					this.$refs.delHyRef.show = false;
					this.selectDelData = {};
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
				}
			});
		},
		// 切换标签页
		changeItem(data) {
			this.auditStatus = data.id;
			this.bwqList = [];
			getApp().globalData.auditStatus = this.auditStatus;
			this.getInit();
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-tabs__wrapper__nav__item {
	flex: 1;
}
::v-deep .u-tabs__wrapper__nav__line {
	bottom: -1rpx;
}
::v-deep .u-tabs__wrapper__nav {
	border-bottom: 1rpx solid var(--backgroundDivisionColor);
}
::v-deep .u-tabbar {
	flex: unset !important;
}
::v-deep .u-popup__content {
	background-color: var(--viewBgColor);
	.u-modal__button-group__wrapper--hover {
		background-color: var(--viewBgColor);
	}
	.u-modal__button-group__wrapper--cancel {
		.u-modal__button-group__wrapper__text {
			color: var(--titleFontColor) !important;
		}
	}
	.u-modal__button-group__wrapper--confirm {
		.u-modal__button-group__wrapper__text {
			color: #e8cda7 !important;
		}
	}
}

::v-deep .u-textarea {
	.u-textarea__field {
		color: var(--titleFontColor);
	}
	background-color: var(--controllerBgColor) !important;
}
.model-msg {
	color: var(--contentFontDarkColor);
}
.group_box {
	background-color: rgba(255, 217, 181, 0.1);
	padding: 10rpx;
	color: #ffd9b5;
	border-radius: 5rpx;
	margin-right: 10rpx;
}
.color_shz {
	color: #d25941;
	flex-shrink: 0;
	padding: 10rpx 20rpx;
	// width: 104rpx;
	// height: 48rpx;

	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.imgCodeBox {
	width: 300rpx;
	height: 300rpx;
}
.circle_box {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	.groupName_box {
		margin-top: 20rpx;
		width: 100%;
	}
	> image {
		width: 400rpx;
		border-radius: 10rpx;
	}
	> text {
		color: var(--viewBgColor);
		font-size: 30rpx;
		font-weight: bold;
	}
}
.homePage {
	height: 100vh;

	.bwq_box {
		padding: 0 24rpx 48rpx 24rpx;
		overflow: hidden;
		flex: 1;
		.bwqMsg {
			background-color: var(--viewBgColor);
			border-radius: 16rpx;
			margin-top: 34rpx;
			.btn_box {
				padding: 0 24rpx 32rpx 24rpx;
				.btn {
					> view {
						background-color: var(--pureButtonBackOneColor);
						// height: 76rpx;
						border: 1rpx solid var(--buttonOutlineOneColor);
						padding: 20rpx 0;
						width: calc(50% - 10rpx);
						border-radius: 12rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: var(--contourButtonTextColor);
					}
					.conferenceBtn {
						flex: 1;
					}
				}
			}
			.basicsMsg {
				padding: 26rpx 24rpx;
				.qdaddress {
					color: var(--contentFontFourColor);
				}
				> view {
					.schoolName {
						font-weight: 700;
						color: var(--titleFontColor);
						line-height: 45rpx;
					}
				}
			}
		}
		.img_box {
			.banner_img {
				width: 100%;
				height: 360rpx;
				border-top-left-radius: 16rpx;
				border-top-right-radius: 16rpx;
			}
		}
	}
	.zwsj {
		flex: 1;
		> image {
			width: 290rpx;
			height: 290rpx;
		}
		> text {
			color: var(--contentFontFourColor);
			// color: #7A7E91;
			position: relative;
			top: -60rpx;
		}
	}
}
</style>
